<template>
  <div class="super-page">
    <n-collapse-transition :show="!collapse">
      <div ref="superPageHeader" :class="{ 'pb-5': $slots.header }">
        <slot name="header"></slot>
      </div>
    </n-collapse-transition>
    <div v-if="props.showCollapse" class="collapse-trigger">
      <div class="flex align-center px-5" @click="collapseToggle">
        <span>{{collapse ? '展开' : '收起'}}</span>
        <n-icon :component="CaretUp" size="16" :class="[ 'ani', {'rotate': collapse}]" />
      </div>
    </div>
    <n-data-table
      :data="props.data"
      :columns="props.columns"
      :single-line="false"
      :style="{ height: `${tableMaxHeight}px` }"
      :scroll-x="scrollX"
      flex-height
      native-scrollbar
    >
    </n-data-table>
    <div
      class="pagination-wrap flex align-center"
      :class="{ 'pagination-wrap-center': mainStore.isMobile }"
    >
      <n-pagination
        :page="props.currentPage"
        :page-size="props.pageSize"
        :item-count="props.total"
        :page-sizes="[5, 10, 20, 30, 50, 100]"
        :show-size-picker="!mainStore.isMobile"
        :page-slot="mainStore.isMobile ? 5 : 9"
        :on-update:page="currentChange"
        :on-update:page-size="pageSizeChange"
      >
        <template v-if="!mainStore.isMobile" #prefix="{ itemCount, startIndex }">
          共{{props.total}}条数据
        </template>
      </n-pagination>
    </div>
  </div>
</template>

<script setup>
import { NIcon, NCollapseTransition, NPagination } from 'naive-ui'
import { CaretUp } from '@vicons/ionicons5'
import { ref, onMounted, nextTick } from 'vue'
import { useMainStore } from '../store/main'
const mainStore = useMainStore()

// 表头ref
const superPageHeader = ref(null)
// 表格最大高度
const tableMaxHeight = ref(500)
// 表头高度
const superPageHeaderHeight = ref(0)
// 表头是否折叠
const collapse = ref(false)

const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    default: () => []
  },
  // 表格列配置 see https://www.naiveui.com/zh-CN/os-theme/components/data-table#DataTable-Props
  columns: {
    type: Array,
    default: () => []
  },
  // 是否显示展开折叠按钮
  showCollapse: {
    type: Boolean,
    default: false
  },
  // 数据总条数
  total: {
    type: Number,
    default: 0
  },
  // 当前页
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 20
  },
  // 如果设定了固定的列，你需要同时设定 scroll-x 或者列太多，表格需要横向滚动，则scrollX需要>= 所有列宽之和，否则不会出现横向滚动条
  scrollX: {
    type: Number,
    default: undefined
  }
})
const emit = defineEmits(['pageChange'])

onMounted(() => {
  nextTick(() => getHeaderSlotHeight())
  window.onresize = () => {
    requestAnimationFrame(() => getHeaderSlotHeight())
  }
})

function getHeaderSlotHeight () {
  if (superPageHeader.value) {
    // 窗口高度
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
    superPageHeaderHeight.value = superPageHeader.value.offsetHeight
    /*
    * layout-header 高45
    * layout-footer 高45
    * layout-main 上下padding 10px
    * */
    const otherHeight = 110
    if (props.showCollapse) {
      // collapse 高30px
      tableMaxHeight.value = windowHeight - otherHeight - superPageHeaderHeight.value - 30
    } else {
      tableMaxHeight.value = windowHeight - otherHeight - superPageHeaderHeight.value
    }
  }
}

function collapseToggle () {
  if (collapse.value) {
    tableMaxHeight.value -= superPageHeaderHeight.value
  } else {
    tableMaxHeight.value += superPageHeaderHeight.value
  }
  collapse.value = !collapse.value
}

// 当前页改变
function currentChange (currentPage) {
  emit('pageChange', currentPage, props.pageSize)
}

// 当前pageSize改变
function pageSizeChange (pageSize) {
  const current = props.currentPage * props.pageSize
  emit('pageChange', Math.ceil(current / pageSize), pageSize)
}
</script>

<style scoped lang="scss">
.collapse-trigger {
  font-size: 12px;
  color: var(--secondary-text);
  cursor: pointer;
  padding-bottom: 5px;
  display: flex;
  justify-content: center;
}

.ani {
  transition: all 300ms ease;
}

.rotate {
  transform: rotate(180deg);
}

.pagination-wrap {
  position: fixed;
  right: 20px;
  bottom: 0;
  height: 45px;
}
.pagination-wrap-center {
  right: 50%;
  transform: translateX(50%);
}
</style>
